<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title>AlloyTouch</title>

    <style type="text/css">
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        html {
            -ms-touch-action: none;
        }

        body, ul, li {
            padding: 0;
            margin: 0;
            border: 0;
        }

        body {
            font-size: 12px;
            font-family: ubuntu, helvetica, arial;
            overflow: hidden;
        }

        #header {
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 45px;
            line-height: 45px;
            background: #00ABEB;
            padding: 0;
            color: #eee;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }

        #footer {
            position: absolute;
            z-index: 2;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 48px;
            background: #e2e2e2;
            padding: 0;
        }

        #wrapper {
            position: absolute;
            z-index: 1;
            top: 45px;
            bottom: 48px;
            left: 0;
            width: 100%;
            background: #ccc;
            overflow: hidden;
        }

        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            width: 100%;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
        }

        #scroller ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
            display: none;
        }

        #scroller li {
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #fff;
            background-color: #fafafa;
            font-size: 14px;
            position: absolute;
            width: 100%;
            top:0px;
            left: 0px;
        }
        .loading{
            text-align: center;
            line-height: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
<div id="header">AlloyTouch</div>
<div id="wrapper">
    <div id="scroller">
        <ul>


        </ul>
        <div class="loading" id="loading">loading...</div>
    </div>
</div>
<div id="footer"></div>
<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:140px;height:140px;">
    <img src="//alloyteam.github.io/github.png" alt="">
</a>
<script src="../../transformjs/transform.js"></script>
<script src="../../alloy_touch.js"></script>
<script>

    var allData = [],
        index = 0,
        at,
        target = document.querySelector("#scroller"),
        loading = false,
        ul = document.querySelector("#scroller ul"),
        loadingDiv = document.querySelector("#loading"),
        currentHeight = 0;

    Transform(target,true);

    function mockData() {
        var dataList = [],
                i = 0;
        for (; i < 100; i++) {
            dataList.push({name: "row", num: index++});
        }
        return dataList;
    }

    function processingData(dataList) {
        var i = 0, len = dataList.length;
        for (; i < len; i++) {
            allData.push({removed:false, data: dataList[i], translateY: 0, dom: null });
        }
    }

    function render(renderTo,dataList){
        var docfrag = document.createDocumentFragment();
        var i= 0,len=dataList.length;
        for(;i<len;i++){
            var item = dataList[i];
            var li = document.createElement("li");
            li.innerHTML = item.name+" "+item.num;
            docfrag.appendChild(li);
        }
        renderTo.appendChild(docfrag);
    }

    function initList() {
        var lis = document.querySelectorAll("#scroller li"),
                i = 1,
                len = lis.length;


        setTranslateY(lis[0], 0);
        allData[0].dom = lis[0];
        var height = 0;
        for (; i < len; i++) {
            var li = lis[i - 1];
            height = parseInt(window.getComputedStyle(li, null).height);
            currentHeight += height;
            setTranslateY(lis[i], currentHeight);
            allData[i].translateY = currentHeight;
            allData[i].dom = lis[i];
        }
        currentHeight += height

        setTranslateY(loadingDiv, currentHeight);
        ul.style.display = "block";
    }



    function setTranslateY(dom,value) {
        dom.style.transform = dom.style.msTransform = dom.style.OTransform = dom.style.MozTransform = dom.style.webkitTransform = "translateY(" + value + "px) translateZ(0)";
    }

    function throttle(fn, threshhold, scope) {
        threshhold || (threshhold = 250);
        var last,
            deferTimer;
        return function () {
            var context = scope || this;

            var now = +new Date,
                args = arguments;
            if (last && now < last + threshhold) {
                // hold on to it
                clearTimeout(deferTimer);
                deferTimer = setTimeout(function () {
                    last = now;
                    fn.apply(context, args);
                }, threshhold);
            } else {
                last = now;
                fn.apply(context, args);
            }
        };
    }

    var vpHeight = window.innerHeight - 45 - 48;

    function newAlloyTouch() {
        at = new AlloyTouch({
            touch: "#wrapper",//反馈触摸的dom
            vertical: true,//不必需，默认是true代表监听竖直方向touch
            target: target, //运动的对象
            property: "translateY",  //被滚动的属性
            maxSpeed: 2,
            min: window.innerHeight - 45 - 48 - currentHeight - 40 , //不必需,滚动属性的最小值
            max: 0, //不必需,滚动属性的最大值
            change:throttle( function (v) {
                var i = 0,len =allData.length;

                for (; i < len; i++) {

                    var item = allData[i];
                    //保留5屏顺序
                    if (v + item.translateY > -vpHeight * 2 && v + item.translateY < vpHeight * 3) {
                        item.removed&&ul.appendChild(item.dom);
                        item.removed = false;
                    } else {
                        if (!item.removed) {
                            ul.removeChild(item.dom);
                            item.removed = true;

                        }

                    }
                }

                if (v <= this.min + 20 && !loading) {
                    loadMore();
                }
            },100),
            animationEnd: function (value) {
                //console.log(value);
            },
            pressMove: function (evt, value) {
                //console.log(evt.deltaX + "_" + evt.deltaY + "__" + value);
            }
        })
    }

    function loadMore() {
        loading = true;

        setTimeout(function () {
            var arr = [];
            var totalHeight = 0;
            var docfrag = document.createDocumentFragment();
            var dataList = mockData(),
                    len =dataList.length,
                    i= 0;
            var allDataLen = allData.length;
            processingData(dataList);
            for ( ; i < len; i++) {
                var data = dataList[i];
                var li = document.createElement("li");
                li.innerHTML =data.name + " " + data.num;
                docfrag.appendChild(li);
                arr.push(li);
            }

            ul.appendChild(docfrag);

            //这里不考虑图片撑开的问题，因为最佳做法是上传后就知道宽高，服务器返回的json list里包含宽高信息。宽高信息建议直接作用于图片容器避免撑开的问题
            var len = arr.length,
                    height = 0;
            setTranslateY(arr[0], currentHeight);
            allData[allDataLen].translateY = currentHeight;
            allData[allDataLen].dom = arr[0];
            for (i = 1; i < len; i++) {
                var height = parseInt(window.getComputedStyle(arr[i - 1], null).height);
                totalHeight += height;
                currentHeight += height;
                setTranslateY(arr[i], currentHeight);
                allData[i+allDataLen].translateY = currentHeight;
                allData[i+allDataLen].dom = arr[i];
            }
            currentHeight += height;
            setTranslateY(loadingDiv,currentHeight);
            at.min -= totalHeight+height;
            loading = false;
        }, 1000);
    }

    function init(){
        var dataList = mockData();
        processingData(dataList);

        render(ul,dataList);

        initList();
        newAlloyTouch();
    }
    init();



</script>
</body>
</html>
